<template>
  <div id="agent">
    <div class="agent-box">
      <!-- 聊天内容 -->
      <div class="agent-txt">
        <div
          class="scroll-container"
          ref="scrollContainer"
        >
          <div
            v-for="(msg, index) in messages"
            :key="index"
            :class="msg.sender"
          >
            <!-- AI 消息 -->
            <div
              v-if="msg.sender === 'ai'"
              class="ai-box"
            >
              <div class="ai-face">
                <img src="@/assets/img/face1.png">
              </div>
              <div class="ai-txt">{{ msg.text }}</div>
            </div>
            <!-- 用户消息 -->
            <div
              v-if="msg.sender === 'user'"
              class="my-box"
            >
              <div class="my-txt">{{ msg.text }}</div>
              <div class="my-face">
                <img src="@/assets/img/face2.png">
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 输入框 -->
      <div class="agent-input">
        <el-input
          v-model="textarea"
          type="textarea"
          placeholder="请输入对话内容，换行请使用Shift+Enter。"
          resize="none"
          @keyup.enter.native="sendMessage"
        />
        <div class="input-clear">
          <el-icon>
            <BrushFilled />
          </el-icon>
          <div @click="clearMessages">清空对话</div>
        </div>
        <div
          class="input-btn"
          :class="{ 'btn-disabled': isProcessing }"
          @click="sendMessage"
        >发送</div>
      </div>
    </div>
  </div>
</template>
  
<script>
export default {
  data() {
    return {
      isProcessing: false,
      userInfo: null, // 用户信息
      userId: null, // 用户 ID
      textarea: "", // 输入框内容
      messages: [], // 存储聊天记录
      eventSource: null, // SSE 实例
      connectId: null, // SSE 返回的客户端通信 ID
      sessionId: null, // 当前会话 ID
      currentAiMessageIndex: null, // 当前 AI 消息的索引
      isFirst: true, // 是否是首次接收到消息
      loadingMessageIndex: null, // 加载提示消息的索引
    };
  },
  created() {
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    this.userId = this.userInfo.userId;
  },
  mounted() {
    this.initMessages();
    this.generateSessionId(); // 生成会话 ID
  },
  methods: {
    initMessages() {
      //"sender": "ai", "text": "...",
      const obj = {
        sender: "ai",
        text: "同学您好，您准备好了么? 请发送‘开始’进行考核。",
        isLoading: false,
      };
      this.messages.push(obj);
    },

    // 生成会话 ID（模拟）
    generateSessionId() {
      this.sessionId = Math.random().toString(36).substr(2, 10); // 随机生成一个唯一 ID
    },

    // 发送用户消息
    sendMessage() {
      // 新增：检查是否正在处理对话
      if (this.isProcessing) {
        this.$message.warning("当前对话尚未结束，请稍后再试！");
        return;
      }
      if (!this.textarea.trim()) {
        return; // 如果输入为空，则不发送
      }

      const userMessage = this.textarea.trim(); // 获取用户输入的内容

      // 添加用户消息到聊天记录
      this.messages.push({ sender: "user", text: userMessage });

      // 在聊天记录中添加一个“加载中”的占位消息
      this.loadingMessageIndex = this.messages.length;
      this.messages.push({ sender: "ai", text: "...", isLoading: true });

      // 启动 SSE 连接，并将用户输入作为 prompt 传递
      this.connectToSSE(userMessage);

      // 清空输入框
      this.textarea = "";

      this.scrollToBottom();
    },

    // 连接到 SSE 接口
    connectToSSE(prompt) {
      if (!window.EventSource) {
        console.error("Your browser does not support Server-Sent Events.");
        return;
      }
      // 关闭之前的 SSE 连接（如果有）
      if (this.eventSource) {
        this.eventSource.close();
      }
      // 新增：标记对话正在处理中
      this.isProcessing = true;
      this.eventSource = new EventSource("/sse/dify/sse/connect");
      // 监听消息事件
      this.eventSource.onmessage = (event) => {
        let data = event.data;
        console.log(this.messages[1]?.text, "this.messages");
        console.log(data, "data");

        // 根据返回的标识处理数据
        if (data === "↖Start↘") {
          console.log("回答开始");
          // 回答开始，无需特殊处理
        } else if (data === "对话结束") {
          // 回答结束
          console.log("回答结束！");
          // this.$message.success("回答结束！");
          this.isProcessing = false; // 新增：重置对话状态
          this.closeSend();
          return;
        } else if (data.includes("↖Error↘")) {
          // 错误信息
          data = data.replaceAll("↖Error↘", "");
          this.$message.error(data);
          this.replaceLoadingMessage("抱歉，发生了错误：" + data);
          this.isProcessing = false; // 新增：重置对话状态
          this.closeSend();
          return;
        } else if (this.isFirst) {
          // 首次返回的是 connectId，不添加到消息中
          this.connectId = data;
          this.callPostApi(prompt); // 调用 POST 接口
          this.isFirst = false;

          // 替换“加载中”消息为实际的 AI 消息
          this.currentAiMessageIndex = this.loadingMessageIndex;
          // this.replaceLoadingMessage("");
        } else {
          // 普通数据处理
          data = data.replaceAll("↖Start↘", ""); // 移除 "↖Start↘"
          data = data.replaceAll("↖emsp↘", " "); // 替换空格
          data = data.replaceAll("↖br↘", "\n"); // 替换换行符
          data = data.replaceAll("↖tab↘", "   "); // 替换制表符

          if (this.messages[this.currentAiMessageIndex].text.includes("...")) {
            this.messages[this.currentAiMessageIndex].text = "";
          }

          // 追加到当前 AI 消息的最后一段
          this.messages[this.currentAiMessageIndex].text += data;
          this.scrollToBottom();
        }
      };

      // 监听错误事件
      this.eventSource.onerror = (error) => {
        console.error("SSE error:", error);
        this.isProcessing = false; // 新增：重置对话状态
        this.closeSend();
        // this.$message.error("连接失败，请稍后重试");
        // this.replaceLoadingMessage("连接失败，请稍后重试");
      };
    },

    // 调用 POST 接口 /dify/assess/agent/dialogue
    callPostApi(prompt) {
      const url = "/dify/agent/assess";
      const data = {
        prompt: prompt, // 用户输入的 query
        connectId: this.connectId, // SSE 返回的客户端通信 ID
        sessionId: this.sessionId, // 当前会话 ID
        userId: this.userId, // 用户 ID
        param: {},
        id: 5, //现阶段写死5即可。后期对接列表
      };
      this.$axios.post(url, data);
    },

    // 替换“加载中”消息
    replaceLoadingMessage(newText) {
      if (this.loadingMessageIndex !== null) {
        this.messages[this.loadingMessageIndex] = {
          sender: "ai",
          text: newText,
          isLoading: false,
        };
        this.scrollToBottom();
      }
    },

    // 关闭 SSE 连接并重置状态
    closeSend() {
      if (this.eventSource) {
        this.eventSource.close();
      }
      this.isFirst = true; // 重置 isFirst 状态
      this.connectId = null; // 清空 connectId
      this.loadingMessageIndex = null; // 清空加载提示索引
    },

    // 清空聊天记录
    clearMessages() {
      this.messages = [];
    },

    // 滚动到底部
    scrollToBottom() {
      this.$nextTick(() => {
        const container = this.$refs.scrollContainer;
        if (container) {
          container.scrollTop = container.scrollHeight;
        }
      });
    },
  },
  beforeDestroy() {
    // 组件销毁时关闭 SSE 连接
    if (this.eventSource) {
      this.eventSource.close();
    }
  },
};
</script>
<style lang="scss" scoped>
#agent {
  height: calc(100vh - 150px);
  .agent-box {
    position: relative;
    height: 100%;
    // background: linear-gradient(90deg, #ffffff, #d5e5fe);
    // box-shadow: 0px 0px 7px 0px rgba(70, 123, 235, 0.13);

    background: linear-gradient(90deg, #f0f2f8, #d1e1f8);
    box-shadow: 0px 0px 7px 0px rgba(70, 123, 235, 0.13);

    border-radius: 10px;
    border: 1px solid #ffffff;
    box-sizing: border-box;
    .agent-txt {
      height: calc(100% - 234px);
      > div {
        height: 100%;
        margin: 36px 0px;
        padding: 0px 26px;
        box-sizing: border-box;
        > div {
          margin-bottom: 20px;
        }
      }
      .ai-box {
        display: flex;
        justify-content: flex-start;
        gap: 14px;
        .ai-face {
          min-width: 40px;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background: #ffffff;
        }
        .ai-txt {
          // max-width: calc(100% - 108px);
          max-width: 80%;
          background: #ffffff;
          border-radius: 6px;
          font-size: 16px;
          color: #4b5b76;
          padding: 10px 15px;
          box-sizing: border-box;
          box-shadow: 0px 5px 10px 0px rgba(70, 123, 235, 0.11);
          border: 1px solid #e2e2e2;
        }
      }
      .my-box {
        display: flex;
        justify-content: flex-end;
        gap: 14px;
        .my-face {
          min-width: 40px;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background: #1e4aee;
        }
        .my-txt {
          // max-width: calc(100% - 108px);
          max-width: 80%;
          background: #1e4aee;
          border-radius: 6px;
          font-size: 16px;
          color: #ffffff;
          padding: 10px 15px;
          box-sizing: border-box;
        }
      }
    }
    .agent-input {
      position: relative;
      width: calc(100% - 52px);
      position: absolute;
      left: 26px;
      bottom: 36px;
      box-sizing: border-box;
      :deep(.el-textarea) {
        position: relative;
        background: #fff;
        padding-bottom: 48px;
        box-shadow: 0px 5px 10px 0px rgba(70, 123, 235, 0.11);
        border: 1px solid #e2e2e2;
        border-radius: 8px;
        padding: 18px 0px 40px;
        box-sizing: border-box;
      }
      :deep(.el-textarea__inner) {
        height: 90px;
        border: 0;
        box-shadow: none;
        background: #ffffff;
        box-sizing: border-box;
        padding: 0px 26px;
        overflow-y: auto; // 启用纵向滚动

        // 针对 Webkit 浏览器（如 Chrome、Safari）
        &::-webkit-scrollbar {
          width: 4px; // 设置滚动条宽度
        }

        &::-webkit-scrollbar-track {
          background: transparent; // 将轨道背景设为透明可以间接隐藏上下箭头
          border-radius: calc(4px / 2); // 使用 calc() 替代 /
        }

        &::-webkit-scrollbar-thumb {
          background: #c1c1c1; // 设置滑块颜色
          border-radius: calc(4px / 2); // 使用 calc() 替代 /

          &:hover {
            background: #a8a8a8; // 手动计算 darken(#c1c1c1, 10%) 的结果
          }
        }
      }
      .input-clear {
        position: absolute;
        left: 16px;
        bottom: 13px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        color: #7c8aa7;
        cursor: pointer;
        &:hover {
          color: #2a6ee9;
        }
      }
      .input-btn {
        position: absolute;
        right: 15px;
        bottom: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 70px;
        height: 34px;
        background: #2a6ee9;
        border-radius: 10px;
        font-size: 14px;
        color: #ffffff;
        cursor: pointer;
        &:hover {
          background: #1e4aee;
        }
        &.btn-disabled {
          background: #d5e5fe;
          cursor: not-allowed;
        }
      }
    }
  }
}
</style>